<template>
  <template v-for="menu in props.menus">
    <template v-if="menu.children && menu.children.length > 0">
      <el-sub-menu :index="menu.id" :key="menu.id">
        <template #title>
          <el-icon><span class="iconfont f17" :class="[menu.icon]" /></el-icon>
          <span class="m-l-10">{{ menu.title }}</span>
        </template>
        <menu_tree :menus="menu.children"></menu_tree>
      </el-sub-menu>
    </template>
    <template v-else>
      <el-menu-item :index="menu.url" :key="menu.id">
        <el-icon><span class="iconfont f17" :class="[menu.icon]" /></el-icon>
        <span class="m-l-10">{{ menu.title }}</span>
      </el-menu-item>
    </template>
  </template>
</template>

<script lang="ts" setup>
import {withDefaults,defineProps} from "vue"

export interface Props {
  menus: [],
}

const props = withDefaults(defineProps<Props>(), {
  menus: () => [],
})
</script>

<style lang="scss" scoped>

</style>
